<template>
  <div v-loading="pageLoading" class="app-container flex-col"
    style="width: 100%; height: 100%; padding: 0;overflow-x:hidden ">
    <div style="padding: 15px;">
      <el-row :gutter="30">
        <el-col :span="12">
          <line-Group :functionName="functionName" :data="initData" @onClear="onClearGroupOrEmp"
            @onChange="checkLineGroup"></line-Group>
        </el-col>
        <el-col :span="12">
          <emp-scan :focus.sync="empFocus" :data="initData" @onClear="checkData" @onChange="checkData"></emp-scan>
        </el-col>
      </el-row>
    </div>
    <div style="padding: 15px;border-top: 1px #606266 solid;">
      <el-row :gutter="40" class="flex">
        <el-col :span="12" style="display: flex;align-items: center;align-self: center;">
          <span style=" margin-right: 10px; font-size: 26px;">请扫码</span>
          <el-input v-model="scanData" ref="scan" size="large" style="flex: 1; font-size: 28px; font-weight: bold;"
            :disabled="!canScan" @keyup.enter.native="afterScan"></el-input>
        </el-col>
        <el-col :span="6" :offset="6" style="align-self: center;">
          <el-form>
            <el-form-item label="是否自动分板" class="mb-0">
              <el-checkbox v-model="initData.autoReleaseBind" @change="setLocaSt"></el-checkbox>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div class="flex1 flex" style="border-top: 1px #606266 solid; overflow: auto;">
      <div class="z-panel" style="width: 100%; padding: 15px; border-right: 1px #606266 solid;">
        <div class="flex" style="margin: 0 auto 20px">
          <div class="z-panel-title mr-30">拼板序号
            {{ snHistory.length ? snHistory.length : '' }}
          </div>
          <el-button type="info" size="medium" @click='releaseBind' v-if="snHistory.length > 1 ">分板过站
          </el-button>
        </div>
        <div class="z-panel-body">
          <el-tag v-for="(i,t) in snHistory" type="warning" :key="t" style="margin:0 10px 10px 0">{{ i.serial_number }}
          </el-tag>
          <div class="z-border z-empty-box" v-show="!snHistory.length">暂无数据</div>
        </div>
      </div>
    </div>
    <message-box :msgs="msgs"></message-box>

  </div>
</template>
<script>
import dayjs from 'dayjs'
import _ from 'lodash'
import lineGroup from '@/components/WinClient/lineGroup'
import empScan from '@/components/WinClient/empScan'
import messageBox from '@/components/WinClient/messageBox'
import mixinClient from '@/views/_common/mixinClient'
export default {
  components: { lineGroup, empScan, messageBox },
  mixins: [mixinClient],
  name: 'smtReleaseBind',
  data() {
    return {
      canScan: false,
      pageLoading: false,
      scanData: null,
      empFocus: false,
      initData: {
        line: null,
        group: null,
        emp: null,
        empName: null,
        autoReleaseBind: false,
      },
      snHistory: [],
      msgs: [],
    }
  },
  methods: {
    puzzleNumChange() {
      this.$refs.scan.focus()
    },
    checkLineGroup() {
      if (!this.initData.line) return this.showMessage('请选择线别')
      if (!this.initData.group) return this.showMessage('请选择工站')
      if (!this.initData.empName) {
        this.showMessage('请扫描作业员')
        this.empFocus = true
        return
      }
      this.checkData()
    },
    onClearGroupOrEmp() {
      this.undo()
      this.checkLineGroup()
    },
    checkData() {
      if (this.initData.emp && !this.initData.empName) {
        this.showMessage('作业员不正确', true)
        return
      }
      if (this.initData.line && this.initData.group && this.initData.emp) {
        this.canScan = true
        setTimeout(() => {
          this.showMessage('请扫描序号', false)
          this.$refs.scan.focus()
        }, 200)
      }
    },
    afterScan() {
      this.scanData = this.scanData.trim()
      if (!this.scanData) {
        this.showMessage('没有扫描到任何内容', true)
        return
      }
      if (this.scanData.toUpperCase() == 'UNDO') {
        this.undo()
        return
      }
      if (this.scanData.toUpperCase() == 'END') {
        if (this.snHistory.length > 1) {
          this.releaseBind()
        } else {
          this.showMessage('分板过站数量需要大于1条', true)
        }
        return
      }

      this.pageLoading = true
      this.$request(this.$api.bindsn + 'GetSnBindData', { sn: this.scanData }, 'get', true)
        .then((r) => {
          this.pageLoading = false
          if (r) {
            if (r.sn_data.bind_status === 0) {
              this.showMessage(`[${r.sn_data.serial_number}]没有拼板，无法取消`, true)
              this.snHistory = []
            } else if (r.sn_data.bind_status === 2) {
              this.showMessage(`[${r.sn_data.serial_number}]已分板，无法取消拼板`, true)
              this.snHistory = []
            } else {
              if (r.sn_data.sn_status === 1) {
                this.snHistory = []
                r.bind_sn_list.forEach((i) => {
                  this.snHistory.push({
                    serial_number: i,
                  })
                })
                if (this.initData.autoReleaseBind) {
                  this.releaseBind('auto')
                }
              } else {
                this.showMessage(`[${r.sn_data.serial_number}]已包装，无法取消拼板`, true)
                setTimeout(() => {
                  this.$refs.scan.select()
                }, 200)
              }
            }
          } else {
            this.pageLoading = false
            setTimeout(() => {
              this.$refs.scan.select()
            }, 200)
            this.showMessage(e.message, true)
          }
        })
        .catch((e) => {
          this.pageLoading = false
          setTimeout(() => {
            this.$refs.scan.select()
          }, 200)
          this.showMessage(e.message, true)
        })
    },
    setLocaSt() {
      var tmp = localStorage.getItem(`${this.functionName}-initData`)
      localStorage.setItem(
        `${this.functionName}-initData`,
        JSON.stringify({ ...JSON.parse(tmp), autoReleaseBind: this.initData.autoReleaseBind }),
      )
      this.$refs.scan.focus()
    },
    getLocaSt() {
      var tmp = localStorage.getItem(`${this.functionName}-initData`)
      if (tmp) {
        this.initData.autoReleaseBind = JSON.parse(tmp).autoReleaseBind
        this.$refs.scan.focus()
      }
    },
    releaseBind(flag) {
      let data = {
        snList: this.snHistory.map((i) => i.serial_number),
        reqPassStation: {
          line: this.initData.line,
          group: this.initData.group,
          sn: this.snHistory.map((i) => i.serial_number)[0],
          emp: this.initData.emp,
          ec: [],
        },
      }
      this.pageLoading = true
      this.$request(this.$api.bindsn + 'SplitBoardBySn', data, 'post', true)
        .then((r) => {
          this.pageLoading = false
          if (flag == 'auto') {
            this.showMessage('自动分板过站成功', false)
          } else {
            this.showMessage('分板过站成功', false)
          }
          this.scanData = null
          this.snHistory = []
          setTimeout(() => {
            this.$refs.scan.focus()
          }, 200)
        })
        .catch((e) => {
          this.pageLoading = false
          setTimeout(() => {
            this.$refs.scan.select()
          }, 200)
          this.showMessage(e.message, true)
        })
    },

    undo() {
      this.scanData = null
      this.snHistory = []
      this.showMessage('重置OK，请重新扫描', false)
    },
  },
  mounted() {
    this.getLocaSt()
  },
}
</script>
<style lang="scss" scoped>
@import '@/styles/client.scss';
</style>